$heading-font: "Avenir Next", "Helvetica Neue", sans-serif!default;
$body-font: "Lora", "Merriweather", "Georgia", serif!default;
$small-font: "Avenir Next", "Helvetica Neue", sans-serif!default;
$code-font: "Input Sans Narrow", "Source Code Pro", "Input Sans", "Inconsolata", monospace!default;

// Brand colors
$brand-red: #EC5334!default;
$brand-blue: #5DD9F2!default;
$brand-purple: #81426E!default;
$brand-dark: #434343!default;
$brand-light: #FCFCF5!default;

// UI colors
$font-color: #222!default;
$heading-color: #222!default;
$quiet-font-color: #999!default;
$background-color: #fff!default;
$background-alt-color: #eee!default;

// Font and spacing
$base-font-size: 18px!default;
$base-line-height: 27px!default;
$base-spacing-unit: $base-line-height!default;
$half-spacing-unit: $base-spacing-unit / 2!default;
$quarter-spacing-unit: $base-spacing-unit / 4!default;
$line-height-ratio: $base-line-height / $base-font-size!default;
$scale-base: 12px!default;
$scale-ratio: 1.2!default;
// 1.2 is minor third
// $scale-ratio: 1.125!default;
// 1.125 is major second

$h1-size: scale(5, $scale-ratio, $scale-base)!default;
$h2-size: scale(4, $scale-ratio, $scale-base)!default;
$h3-size: scale(3, $scale-ratio, $scale-base)!default;
$h4-size: scale(2, $scale-ratio, $scale-base)!default;
$h5-size: scale(1, $scale-ratio, $scale-base)!default;
$h6-size: scale(0, $scale-ratio, $scale-base)!default;

$deci-size: 15px!default;
$centi-size: 13px!default;
$milli-size: 11px!default;
$micro-size: 10px!default;
$bold: 600!default;
$fat: 700!default;
$normal: 400!default;

// Round
$brand-round: 7px!default;

// Color tints
$tint: 95%!default;
$heavy-tint: 90%!default;
$fat-tint: 75%!default;
$light-tint: 97%!default;

// UI element colors
$action-color: #6EEDF8!default;
$action-color-light: lighten($action-color, 10%)!default;
$action-color-dark: darken($action-color, 10%)!default;

// Borders
$border-color: mix($background-color, $font-color, 85%)!default;
$quiet-border-color: mix($background-color, $font-color, $heavy-tint)!default;
$heavy-border-color: darken($border-color, 8%)!default;
$border-width: 2px!default;
$border: $border-width $border-color solid!default;
$action-border: $border-width $action-color solid!default;
$quiet-border: $border-width $quiet-border-color solid!default;
$heavy-border: $border-width $heavy-border-color solid!default;

// Widths
$max-width: 700px!default;
$top-padding: 1px!default; /* Where does the horizontal grid start? */

// Transitions
$transition-speed: .3s!default;
$transition-easing: cubic-bezier(.23, 1, .32, 1)!default;
$transition-easing--bounce: cubic-bezier(.75, -.25, .25, 2)!default;
$transition-easing--smooth-bounce: cubic-bezier(0.525, -0.2, 0.135, 1.3)!default;

// Breakpoints
$lap-start: 650px!default;
$desk-start: 1350px!default;
$desk-wide-start: 1650px!default;
